﻿@using System.Threading.Tasks
@using MyCompanyName.AbpZeroTemplate.Tenants.Dashboard.Dto
@using MyCompanyName.AbpZeroTemplate.Web.Areas.AppAreaName.Startup
@{
    ViewBag.CurrentPageName = AppAreaNamePageNames.Tenant.Dashboard;
}
@section Styles {
    <link rel="stylesheet" abp-href="/lib/morris.js/morris.css" asp-append-version="true" />
    <link rel="stylesheet" abp-href="/view-resources/Areas/AppAreaName/Views/Dashboard/Index.css" asp-append-version="true" />
}

@section Scripts {
    <script abp-src="/view-resources/Areas/AppAreaName/Views/_Bundles/tenant-dashboard-libs.js" asp-append-version="true"></script>
}

<div class="kt-subheader kt-grid__item">
    <div class="kt-subheader__main">
        <h3 class="kt-subheader__title">
            <span>@L("Dashboard")</span>
        </h3>
        <span class="kt-subheader__separator kt-subheader__separator--v"></span>
        <span class="kt-subheader__desc">
            @L("DashboardHeaderInfo")
        </span>
    </div>
</div>

<div class="kt-content kt-grid__item kt-grid__item--fluid">
    <div class="kt-portlet kt-portlet--height-fluid">
        <div class="kt-portlet__body kt-portlet__body--fit">
            <div class="row row-no-padding row-col-separator-xl">
                <div class="col-md-12 col-lg-6 col-xl-3">
                    <div class="kt-widget24">
                        <div class="kt-widget24__details">
                            <div class="kt-widget24__info">
                                <h4 class="kt-widget24__title">
                                    Total Profit
                                </h4>
                                <span class="kt-widget24__desc">
                                    All Customs Value
                                </span>
                            </div>
                            <span class="kt-widget24__stats kt--font-brand">
                                $<span class="counterup" id="totalProfit">...</span>
                            </span>
                        </div>
                        <div class="progress progress--sm">
                            <div class="progress-bar kt-bg-brand" role="progressbar" style="width: 76%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="kt-widget24__action">
                            <span class="kt-widget24__change">
                                Change
                            </span>
                            <span class="kt-widget24__number">
                                <span class="counterup">76</span>%
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6 col-xl-3">
                    <div class="kt-widget24">
                        <div class="kt-widget24__details">
                            <div class="kt-widget24__info">
                                <h4 class="kt-widget24__title">
                                    New Feedbacks
                                </h4>
                                <span class="kt-widget24__desc">
                                    Customer Review
                                </span>
                            </div>
                            <span class="kt-widget24__stats kt--font-info counterup" id="newFeedbacks">
                                ...
                            </span>
                        </div>
                        <div class="progress progress--sm">
                            <div class="progress-bar kt-bg-info" role="progressbar" style="width: 85%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="kt-widget24__action">
                            <span class="kt-widget24__change">
                                Change
                            </span>
                            <span class="kt-widget24__number">
                                <span class="counterup">85</span>%
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6 col-xl-3">
                    <div class="kt-widget24">
                        <div class="kt-widget24__details">
                            <div class="kt-widget24__info">
                                <h4 class="kt-widget24__title">
                                    New Orders
                                </h4>
                                <span class="kt-widget24__desc">
                                    Fresh Order Amount
                                </span>
                            </div>
                            <span class="kt-widget24__stats kt--font-danger counterup" id="newOrders">
                                ...
                            </span>
                        </div>
                        <div class="progress progress--sm">
                            <div class="progress-bar kt-bg-danger" role="progressbar" style="width: 45%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="kt-widget24__action">
                            <span class="kt-widget24__change">
                                Change
                            </span>
                            <span class="kt-widget24__number">
                                <span class="counterup">45</span>%
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6 col-xl-3">
                    <div class="kt-widget24">
                        <div class="kt-widget24__details">
                            <div class="kt-widget24__info">
                                <h4 class="kt-widget24__title">
                                    New Users
                                </h4>
                                <span class="kt-widget24__desc">
                                    Joined New User
                                </span>
                            </div>
                            <span class="kt-widget24__stats kt-font-success counterup" id="newUsers">
                                ...
                            </span>
                        </div>
                        <div class="progress progress--sm">
                            <div class="progress-bar kt-bg-success" role="progressbar" style="width: 57%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <span class="kt-widget24__change">
                            Change
                        </span>
                        <span class="kt-widget24__number">
                            <span class="counterup">57</span>%
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="kt-portlet kt-portlet--height-fluid sales-summary">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            Sales Summary
                        </h3>
                    </div>
                    <div class="kt-portlet__head-toolbar">
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-secondary active">
                                <input type="radio" name="SalesSummaryDateInterval" autocomplete="new-password" checked="" value="@((int)SalesSummaryDatePeriod.Daily)">
                                Daily
                            </label>
                            <label class="btn btn-secondary">
                                <input type="radio" name="SalesSummaryDateInterval" autocomplete="new-password" value="@((int)SalesSummaryDatePeriod.Daily)">
                                Weekly
                            </label>
                            <label class="btn btn-secondary">
                                <input type="radio" name="SalesSummaryDateInterval" autocomplete="new-password" value="@((int)SalesSummaryDatePeriod.Daily)">
                                Monthly
                            </label>
                        </div>
                    </div>
                </div>
                <div class="kt-portlet__body">
                    <div class="row list-separated">
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <h6>
                                Total Sales
                            </h6>
                            <div>
                                <span id="totalSales" class="counterup kt--font-danger kt--font-bolder">...</span> <span class="kt--font-danger kt--font-bolder">$</span>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <h6>
                                Revenue
                            </h6>
                            <div class="uppercase font-hg font-green-haze">
                                <span id="revenue" class="counterup kt--font-warning kt--font-bolder">...</span> <span class="kt--font-warning kt--font-bolder">$</span>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <h6>
                                Expenses
                            </h6>
                            <div class="uppercase font-hg font-purple">
                                <span id="expenses" class="counterup kt-font-success kt--font-bolder">...</span> <span class="kt-font-success kt--font-bolder">$</span>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <h6>
                                Growth
                            </h6>
                            <div class="uppercase font-hg font-blue-sharp">
                                <span id="growth" class="counterup kt--font-info kt--font-bolder">...</span> <span class="kt--font-info kt--font-bolder">$</span>
                            </div>
                        </div>
                    </div>

                    <div id="salesStatisticsLoading" style="text-align: center;">
                        <div class="blockui" style="display: inline-block; margin-top: 120px;">
                            <span>Loading...</span><span>
                                <div class="kt-spinner kt-spinner--primary"></div>
                            </span>
                        </div>
                    </div>

                    <div id="salesStatistics" class="portlet-body-morris-fit morris-chart" style="height: 260px; display: none">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-12">
            <div class="kt-portlet kt-portlet--height-fluid">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            Regional Stats
                        </h3>
                    </div>
                </div>
                <div class="kt-portlet__body">
                    <div id="region_statistics_content">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <td>#</td>
                                        <td>Country</td>
                                        <td>Sales</td>
                                        <td>Change</td>
                                        <td>Avg Price</td>
                                        <td>Total</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Rows are generated dynamically, see initRegionalStats in Index.js -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="kt-portlet kt-portlet--height-fluid">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            General Stats
                        </h3>
                    </div>
                    <div class="kt-portlet__head-toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-sm" id="generalStatsReload">
                            <i class="fa fa-redo"></i> Refresh
                        </a>
                    </div>
                </div>
                <div class="kt-portlet__body">
                    <div class="row">
                        <div class="easy-pie-chart-loading col-lg-12" style="position: absolute; text-align: center; z-index: 999;">
                            <div class="blockui" style="display:inline-block">
                                <span>Loading...</span>
                                <span>
                                    <div class="kt-spinner kt-spinner--primary"></div>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="easy-pie-chart">
                                <div class="number transactions" id="transactionPercent" data-percent="0">
                                    +<span id="transactionPercent">...</span>%
                                </div>
                                <a class="title" href="javascript:;">
                                    Transactions
                                    <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="margin-bottom-10 visible-sm"> </div>
                        <div class="col-md-4">
                            <div class="easy-pie-chart">
                                <div class="number visits" id="newVisitPercent" data-percent="0">
                                    +<span>...</span>%
                                </div>
                                <a class="title" href="javascript:;">
                                    New Visits
                                    <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="margin-bottom-10 visible-sm"> </div>
                        <div class="col-md-4">
                            <div class="easy-pie-chart">
                                <div class="number bounce" id="bouncePercent" data-percent="0">
                                    -<span>...</span>%
                                </div>
                                <a class="title" href="javascript:;">
                                    Bounce
                                    <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-12">
            <div class="kt-portlet kt-portlet--height-fluid">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            Daily Sales
                        </h3>
                    </div>
                </div>
                <div class="kt-portlet__body">
                    <div class="row">
                        <div class="col-md-12">
                            <canvas id="m_chart_daily_sales"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 col-xs-12 col-sm-12">
            <div class="kt-portlet kt-portlet--height-fluid">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            <i class="la la-line-chart kt-font-info"></i>
                            <span class="caption-subject font-blue bold uppercase">Profit Share</span>
                            <small>
                                Profit Share between customers
                            </small>
                        </h3>
                    </div>
                    <div class="kt-portlet__head-toolbar">
                        <a href="#" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
                            Actions
                        </a>
                        <div class="dropdown-menu dropdown-menu-fit dropdown-menu-right">
                            <ul class="kt-nav">
                                <li class="kt-nav__item">
                                    <a href="" class="kt-nav__link">
                                        <i class="kt-nav__link-icon flaticon-share"></i>
                                        <span class="kt-nav__link-text">
                                            Action 1
                                        </span>
                                    </a>
                                </li>
                                <li class="kt-nav__item">
                                    <a href="" class="kt-nav__link">
                                        <i class="kt-nav__link-icon flaticon-chat-1"></i>
                                        <span class="kt-nav__link-text">
                                            Action 2
                                        </span>
                                    </a>
                                </li>
                                <li class="kt-nav__item">
                                    <a href="" class="kt-nav__link">
                                        <i class="kt-nav__link-icon flaticon-info"></i>
                                        <span class="kt-nav__link-text">
                                            Action 3
                                        </span>
                                    </a>
                                </li>
                                <li class="kt-nav__item">
                                    <a href="" class="kt-nav__link">
                                        <i class="kt-nav__link-icon flaticon-lifebuoy"></i>
                                        <span class="kt-nav__link-text">
                                            Action 4
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="kt-portlet__body">
                    <div class="kt-widget14">
                        <div class="kt-widget14__content">
                            <div class="kt-widget14__chart">
                                <div id="m_chart_profit_share" class="kt-widget14__chart" style="height: 160px"></div>
                            </div>
                            <div class="kt-widget14__legends">
                                <div class="kt-widget14__legend">
                                    <span class="kt-widget14__bullet kt-bg-success"></span>
                                    <span class="kt-widget14__stats">

                                    </span>
                                </div>
                                <div class="kt-widget14__legend">
                                    <span class="kt-widget14__bullet kt-bg-warning"></span>
                                    <span class="kt-widget14__stats">

                                    </span>
                                </div>
                                <div class="kt-widget14__legend">
                                    <span class="kt-widget14__bullet kt-bg-brand"></span>
                                    <span class="kt-widget14__stats">

                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xs-12 col-sm-12">
            <div class="kt-portlet kt-portlet--height-fluid">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            Member Activity
                        </h3>
                    </div>
                    <div class="kt-portlet__head-toolbar">
                        <button id="refreshMemberActivityButton" class="btn btn-primary btn-sm"><i class="fa fa-sync"></i> Refresh</button>
                    </div>
                </div>
                <div class="kt-portlet__body">
                    <table class="table kt-table" id="memberActivityTable">
                        <thead>
                            <tr class="uppercase">
                                <th colspan="2">
                                    MEMBER
                                </th>
                                <th>
                                    Earnings
                                </th>
                                <th>
                                    CASES
                                </th>
                                <th>
                                    CLOSED
                                </th>
                                <th>
                                    RATE
                                </th>
                            </tr>
                        </thead>
                        <tr>
                            <td class="fit">
                                <div class="kt-user-card-v2">
                                    <div class="kt-user-card-v2__pic">
                                        <img alt="photo" src="~/metronic/common/images/users/100_1.jpg">
                                    </div>
                                </div>
                            </td>
                            <td></td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                <span class="bold font-green-haze">...</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fit">
                                <div class="kt-user-card-v2">
                                    <div class="kt-user-card-v2__pic">
                                        <img alt="photo" src="~/metronic/common/images/users/100_2.jpg">
                                    </div>
                                </div>
                            </td>
                            <td></td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                <span class="bold font-green-haze">...</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fit">
                                <div class="kt-user-card-v2">
                                    <div class="kt-user-card-v2__pic">
                                        <img alt="photo" src="~/metronic/common/images/users/100_3.jpg">
                                    </div>
                                </div>
                            </td>
                            <td></td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                <span class="bold font-green-haze">...</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fit">
                                <div class="kt-user-card-v2">
                                    <div class="kt-user-card-v2__pic">
                                        <img alt="photo" src="~/metronic/common/images/users/100_4.jpg">
                                    </div>
                                </div>
                            </td>
                            <td></td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                ...
                            </td>
                            <td>
                                <span class="bold font-green-haze">...</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

